<template>
  <div class="message">
    <!-- 顶部导航栏 -->
    <van-nav-bar title="消息中心" class="nav-bar" />

    <!-- 消息列表 -->
    <div class="message-list">
      <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
        <van-list
          v-model:loading="loading"
          :finished="finished"
          finished-text="没有更多了"
          @load="onLoad"
        >
          <van-cell-group v-for="(message, index) in messages" :key="index">
            <van-cell :title="message.title" :label="message.content" center>
              <template #icon>
                <van-badge :content="message.unread ? '1' : ''" :offset="[0, 0]">
                  <van-icon :name="message.icon" size="24" :color="message.color" class="message-icon" />
                </van-badge>
              </template>
              <template #right-icon>
                <span class="message-time">{{ message.time }}</span>
              </template>
            </van-cell>
          </van-cell-group>
        </van-list>
      </van-pull-refresh>
    </div>
  </div>
</template>

<script>
export default {
  name: 'MessageView',
  data() {
    return {
      loading: false,
      finished: false,
      refreshing: false,
      messages: [
        {
          title: '访客申请通知',
          content: '张三申请访问园区，请及时查看',
          time: '10:30',
          icon: 'user-o',
          color: '#1989fa',
          unread: true
        },
        {
          title: '系统通知',
          content: '园区将于本周六进行安全检查',
          time: '昨天',
          icon: 'info-o',
          color: '#ff976a',
          unread: false
        },
        {
          title: '访客审核结果',
          content: '您的访客申请已通过审核',
          time: '周一',
          icon: 'passed',
          color: '#07c160',
          unread: false
        }
      ]
    }
  },
  methods: {
    onLoad() {
      // 加载更多数据
      setTimeout(() => {
        this.loading = false;
        this.finished = true;
      }, 1000);
    },
    onRefresh() {
      // 刷新数据
      setTimeout(() => {
        this.refreshing = false;
      }, 1000);
    }
  }
}
</script>

<style scoped>
.message {
  background-color: #f7f8fa;
  min-height: 100vh;
}

.message-list {
  padding: 12px 0;
}

.message-icon {
  margin-right: 8px;
}

.message-time {
  font-size: 12px;
  color: #969799;
}
</style>